<template>
	<el-table :data="tableData" border style="width: 100%" :default-sort="{ prop: 'NEWEST_PRICE', order: 'descending' }">
		<el-table-column type="index" fixed></el-table-column>
		<el-table-column prop="SECURITY_CODE" label="code" sortable fixed width="100"></el-table-column>
		<el-table-column prop="SECURITY_NAME" label="名称" sortable fixed width="100"></el-table-column>


		<el-table-column prop="CIRCULATION_MARKET_VALUE" label="流通市值(元)"></el-table-column>
		<el-table-column prop="NEWEST_PRICE" label="最新价" sortable
			:sort-method="(a, b) => { return a.NEWEST_PRICE - b.NEWEST_PRICE }" />
		<el-table-column prop="CHG" label="涨跌幅(%)" sortable :sort-method="(a, b) => { return a.CHG - b.CHG }" />
		<el-table-column prop="PCHG" label="涨跌额(元)" sortable></el-table-column>
		<el-table-column prop="PEAK_PRICE" label="最高价(元)" sortable></el-table-column>
		<el-table-column prop="BOTTOM_PRICE" label="最低价(元)"></el-table-column>
		<el-table-column prop="TURNOVER_RATE" label="换手率(%)"></el-table-column>
		<el-table-column prop="VOLUME" label="成交量(股)" sortable :sort-method="sort"></el-table-column>
		<el-table-column prop="TRADING_VOLUMES" label="成交额(元)"></el-table-column>
		<el-table-column prop="TRADEMARKET" label="上市板块" :filter-method="filterTag"
			:filters="[{ text: '上交所主板', value: '上交所主板' }, { text: '深交所主板', value: '深交所主板' }]"></el-table-column>


	</el-table>
</template>

<script >

export default {
	// 北向资金
	data() {
		return {
			tableData: [],
		}
	},
	mounted() {
		this.data().then(data => this.tableData = data.result.data);
	},
	methods: {
		filterTag(value, row) {
			return row.TRADEMARKET === value;
		},
		sort(r1, r2) {
			//https://blog.csdn.net/shids_/article/details/129046419
			console.log(r1.VOLUME.replace("万", ""));
			console.log(parseFloat(r1.VOLUME));

			return parseFloat(r1.VOLUME) - parseFloat(r2.VOLUME);
		},
		data() {
			const options = {
				method: 'GET',
				url: 'https://datacenter-web.eastmoney.com/api/data/v1/get',
				params: {
					sortColumns: 'HOLD_SHARES',
					sortTypes: '-1',
					pageSize: '50',
					pageNumber: '57',
					reportName: 'RPT_MUTUAL_STOCK_NORTHSTA',
					columns: 'ALL',
					source: 'WEB',
					client: 'WEB',
					filter: '(TRADE_DATE=\'2023-12-28\')(INTERVAL_TYPE="1")'
				}
			};

			return new Promise((resolve, reject) => {
				axios.request(options).then(function (response) {
					console.log(response.data);
					return resolve(response.data);
				}).catch(function (error) {
					console.error(error);
				});
			});


		}
	}
}

</script>